<template>
  <div class="module-layout">
    <je-panel v-bind="options">
      <template #top>
        <source-head
          :save-action="saveAction"
          :exec-action="execAction"
          @validateAction="validateAction"
          @valedateExecAction="valedateExecAction"
        />
      </template>
      <template #default>
        <je-form
          :model="formState"
          name="actionForm"
          style="width: 650px; margin: 50px auto"
          autocomplete="off"
          :colon="false"
          :label-col="{ style: 'width:140px;' }"
        >
          <je-form-item label="数据接口服务地址" name="apiUrl" v-bind="validateInfos.apiUrl">
            <je-input
              v-model:value="formState.apiUrl"
              placeholder="请输入数据接口服务地址"
              allow-clear
            />
          </je-form-item>
          <je-form-item label="字段名" name="fieldName" v-bind="validateInfos.fieldName">
            <je-text-area
              v-model:value="formState.fieldName"
              :rows="3"
              placeholder="字段1,字段2,..."
            />
            <!-- <div class="field-explain">注意：多个字段名时以逗号分隔</div> -->
          </je-form-item>
          <je-form-item label="参数名" name="paramName">
            <je-text-area
              v-model:value="formState.paramName"
              :rows="3"
              placeholder="参数1,参数2,..."
            />
            <!-- <div class="field-explain">注意：多个参数名时以逗号分隔</div> -->
          </je-form-item>
          <je-form-item label="返回数据格式说明" name="resultExplain">
            <je-text-area v-model:value="formState.resultExplain" :rows="4" :disabled="true" />
          </je-form-item>
        </je-form>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue';
  import SourceHead from '@/views/data-source/common/source-head.vue';
  import { Form, Input } from '@jecloud/ui';
  import VueEvent from '@/helper/event';
  import { SOURCE_START_RECOVER } from '@/helper/constant';
  import { useSourceStore } from '@/store/source-store';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'SourceAction',
    components: {
      SourceHead,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeTextArea: Input.TextArea,
    },
    setup() {
      const sourceStore = useSourceStore(); //数据源全局状态
      const state = reactive({
        curTabSourceCode: sourceStore.getSourceCode(),
        options: {
          top: { size: 40, split: false },
        },
        formState: {
          apiUrl: '', //数据接口服务器地址
          fieldName: '', //字段名，用于图表报表规划使用，以 逗号 分隔
          paramName: '', //参数名，用于图表报表规划和后台接收参数使用，以 逗号 分隔
          //返回数据格式说明
          resultExplain: `返回的数据集中，数据项的属性值，必须包含字段名内配置的属性，如：
  字段名：field1,field2
  返回数据格式：[{field1:'',field2:''}]`,
        },
        rulesRef: {
          apiUrl: [
            {
              required: true,
              message: '该输入项为必填项',
            },
          ],
          fieldName: [
            {
              required: true,
              message: '该输入项为必填项',
            },
          ],
        },
        saveAction: false, //action模式是否可以开始保存
        execAction: false, //action模式是否可以开始执行
      });
      const { validate, validateInfos, resetFields } = useForm(state.formState, state.rulesRef, {
        onValidate: (...args) => {},
      });
      const methods = {
        //初始化Action配置
        initActionData() {
          const curSourceCode = sourceStore.getSourceCode();
          const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
          if (curSourceData.DATASOURCE_CONFIG) {
            const configData = JSON.parse(curSourceData.DATASOURCE_CONFIG);
            Object.assign(state.formState, configData);
          }
        },
        //设置action配置
        setSourceAction(actionConfig) {
          const curSourceCode = sourceStore.getSourceCode();
          const curSourceData = sourceStore.getSourceDataByCode(curSourceCode);
          curSourceData.DATASOURCE_CONFIG = JSON.stringify(actionConfig);
        },
        //保存验证action
        validateAction() {
          validate().then(() => {
            state.saveAction = true;
            setTimeout(() => {
              state.saveAction = false;
            }, 1000);
          });
        },
        //action执行操作验证必填字段
        valedateExecAction() {
          validate().then(() => {
            state.execAction = true;
            setTimeout(() => {
              state.execAction = false;
            }, 1000);
          });
        },
        //复原操作
        startRecoverData(sourceCode) {
          if (state.curTabSourceCode == sourceCode) {
            const curSourceData = sourceStore.getSourceDataByCode(sourceCode);
            if (curSourceData.DATASOURCE_CONFIG) {
              Object.assign(state.formState, JSON.parse(curSourceData.DATASOURCE_CONFIG));
            } else {
              state.formState = {
                apiUrl: '', //数据接口服务器地址
                fieldName: '', //字段名，用于图表报表规划使用，以 逗号 分隔
                paramName: '', //参数名，用于图表报表规划和后台接收参数使用，以 逗号 分隔
              };
              resetFields();
            }
          }
        },
      };
      watch(
        () => state.formState,
        (val) => {
          methods.setSourceAction(val);
        },
        { deep: true },
      );
      onMounted(() => {
        methods.initActionData();
        VueEvent.on(SOURCE_START_RECOVER, methods.startRecoverData);
      });
      return {
        validate,
        validateInfos,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-layout {
    width: 100%;
    height: 100%;
  }
  .field-explain {
    padding-top: 12px;
    font-size: 14px;
    color: #d9d9d9;
  }
</style>
